<!DOCTYPE html>
<html>

<head>
    <title>designer</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/designer.css">
    <style type="text/css">
        html {
            height: 100%;
        }

        body {
            min-height: 100%;
            position: relative;
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        #banner {
            height: 630px;
        }

        .swiper-container {
            width: 100%;
            height: 632px;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
    </style>
</head>

<body>
    <div id="header">
        <div class="container">
            <div class="header_left left">
                <div class="xlwb"></div>
                <div class="txwb"></div>
                <div class="tel">023-6580-7001</div>
            </div>
            <ul class="right">
                <li>Login</li>
                <li>Sign Up</li>
                <li>Explain</li>
                <li>Help Center</li>
            </ul>
        </div>
    </div>
    <div id="nav">
        <div class="container">
            <div class="logo left">
                <img src="img/logo.png">
            </div>
            <ul class="right">
                <li><a href="index.html">Index</a></li>
                <li><a href="focus.html">Focus</a></li>
                <li><a href="#">Designer</a></li>
                <li><a href="product.html">Products</a></li>
                <li><a href="share.html">Share Your Lifestyle</a></li>
                <li><a href="cart.html">Cart</a></li>
            </ul>
        </div>
    </div>
    <div class="main">
        <div class="person">
            <div class="a-person">
                <img src="img/正负形.jpg" width="540px" height="370px" />
            </div>
            <div class="b-person">
                <div class="skills">
                    <h3>My Skills<span> </span></h3>
                    <h4>A share of light will emit a share of light, a share of heat will emit a share of heat</h4>
                    <div class="evo-skill">
                        <p class="evo-skill-title">Brainstorms & Innovation</p>
                        <p class="evo-skill-number">75%</p>
                        <div class="progress-bar flexible animate"> <span class="progress-75" style="width: 75%"><span>
                                </span></span> </div>
                        <div class="clear"> </div>
                    </div>
                    <div class="evo-skill">
                        <p class="evo-skill-title">Hand Painted</p>
                        <p class="evo-skill-number">90%</p>
                        <div class="progress-bar flexible animate"> <span class="progress-90" style="width: 90%"><span>
                                </span></span> </div>
                        <div class="clear"> </div>
                    </div>
                    <div class="evo-skill">
                        <p class="evo-skill-title">Software</p>
                        <p class="evo-skill-number">50%</p>
                        <div class="progress-bar flexible animate"> <span class="progress-50" style="width: 50%"><span>
                                </span></span> </div>
                        <div class="clear"> </div>
                    </div>
                    <div class="evo-skill">
                        <p class="evo-skill-title">Design</p>
                        <p class="evo-skill-number">60%</p>
                        <div class="progress-bar flexible animate"> <span class="progress-60" style="width: 60%"><span>
                                </span></span> </div>
                        <div class="clear"> </div>
                    </div>
                </div>
            </div>
            <div class="clear"> </div>
        </div>
        <div class="team" id="team">
            <div class="heading">
                <h3><a href="#">Individual Works</a></h3>
            </div>
            <div class="middle-grids">
                <div class="grid_1_of_4 images_1_of_4">
                    <img src="img/猎杀时刻.png">
                    <h3>Animal Conservation</h3>
                    <p>Protecting endangered animals is a costly and arduous work, which needs to be completed by
                        comprehensive means of law, administration, economy and public opinion</p>
                </div>
                <div class="grid_1_of_4 images_1_of_4">
                    <img src="img/和谐北京.png">
                    <h3>Urban Ecology</h3>
                    <p>Urban environmental protection must follow the laws of ecosystem stability and economic
                        development,
                        proceed from the overall and long-term interests, solve the major urban environmental problems
                        such
                        as population, energy, water and water pollution control and land use</p>
                </div>
                <div class="grid_1_of_4 images_1_of_4">
                    <img src="img/都市北京.png">
                    <h3>Environmental Governance</h3>
                    <p>Explore the mutual influence and interaction between human and nature, and explore the effective
                        way
                        of coordinated development and sustainable development of social economy and ecology</p>
                </div>
            </div>
        </div>
    </div><!-- end of main -->
    <div id="footer">
		<div class="container">
			<img src="img/logo.png"/>
				<p>About Skip to My Lo</p>
				<p>Premium Blend</p>
				<p>Get Involved</p>
				<p>Site Map</p>
				<p>Network To Report</p>
		</div>
	</div>
</body><!-- end of body -->

</html>